<template>
  <div class="teaching-main">
    <div class="home-container" :style="getStyle">
      <div class="h-row row2" >
        <div class="h-pannel w50" >
          <panel-title tname="我的课程"/>
          <div>
            <div v-if="data3 && data3.length>0" id="chart3" class="echart"></div>
            <NoData v-else text="暂无数据" class="mt20"></NoData>
          </div>
        </div>
        <div class="h-pannel w50" >
          <panel-title tname="我的作业"/>
          <div>
            <div v-if="data3 && data3.length>0" id="chart3" class="echart"></div>
            <NoData v-else text="暂无数据" class="mt20"></NoData>
          </div>
        </div>
      </div>
      
    </div>

  </div>
</template>

<script>


import NoData from '@/components/common/noDataPage.vue'
import panelTitle from "@/view/teaching/components/panelTitle.vue";
teaching

export default {
  components: {
    NoData,panelTitle
  },
  created () {
  },
  computed:{
  },

  data () {
    return {
      sumList: [
        {name: "课程",  number: 0 },
        {name:  "待办", number: 0 },
        {name:  "教案", number: 0 },
        {name:  "助教", number: 0 }
      ],
      data3:[]
      
      

    }
  },
  mounted () {
    this.initData()
    let mainHeight = window.innerHeight - 66 - 60 // 66 是上下padding，60 是面包屑
    this.mainHeight = 'height:' + mainHeight + 'px'
  },
  methods: {
    goPage (idx) {
      let name = 'achievements' //this.$route.name
      this.$router.push({name:name,query:{page:idx+1}})
    },
    initData () {
      


    },



    getStyle () {
      let innerHeight = window.innerHeight
      let heigt = 'height:' + (innerHeight - 160) + 'px;'
      return heigt
    }

  }
}
</script>

<style>
.home-container{
  cursor: default;
  box-sizing: border-box;
  overflow-y: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.teaching-main{
  padding: 0px;
  background: var(--default-bgcolor)!important;
}
.h-row{
  width: 100%;
  display: flex;
  flex-direction: row;
}
.h-row /deep/ .graphText{
  text-align: center;
}
.row1{
  height: 100px;
}
.row2{
  height: calc(100vh - 140px);
}

.h-pannel{
  overflow: hidden;
  padding: 0 20px;
  margin: 10px;
  background-color:var(--card-body-bgcolor);
  border-radius:12px;
}
.h-row .h-pannel:first-child{
  margin-left: 0vw;
}
.h-row .h-pannel:last-child{
  margin-right: 0px;
}

.none-pannel{
  background-color: rgba(21, 25, 33, 0.01);
  border:0px solid;
  padding: 0px;
  margin: 10px 0;
}
.row3{

}

.w50{
  flex-basis: calc(50% + 20px);
}

.w66{
  flex-basis: calc(66.6% + 20px);
}
.w33{
  flex-basis: 33.3%;
}
.w50{
  width: 50%;
}

.m4{
  margin-top: -5px !important;
}
.teaching-main /deep/ .def-wrap{
  height: 260px;
  width: 100%;
  margin: 0 auto;
}




.part-content{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  cursor: pointer;
}
.p1-item:first-child{
  margin-left: 0px;

}
.p1-item{
  width: 16.6667%;
  height: 100px;
  flex: 1;
  display: flex;
  flex-direction: row;
  margin-left:20px;
  background-color:var(--card-body-bgcolor);
  border-radius:12px;
  padding: 4px 1vw;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.p1-item:hover{
  border-color: rgba(32, 117, 252, 0.3);
}

.p-l{
  width:40% ;
  display: flex;
  justify-content: center;
  align-items: center;

}
.p-r{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
}

.p-r.text{
  width:48px;
  height:17px;
  font-family:Source Han Sans CN;
  color:#8b949e;
  font-size:12px;
  line-height:12px;
}
.p-r.number{
  width:20px;
  height:36px;
  font-family:YouSheBiaoTiHei;
  color:#b2b9c5;
  font-size:28px;
  line-height:22px;
}


.p-content{
  width: calc(100% - 10px);
}
.p-content .des{
  margin-top: 2px;
  font-weight: 550;

}
.img{
  background: url('./iconspirites.png') no-repeat 49.95% 0.145%;
  /*1084 x 1471*/
  /*background-size: 271px 368px;*/
  width: 93px;
  height: 83px;
  transform: scale(.5);
  margin-top: -8px;
}
.img0 {
  background: url('./iconspirites.png') no-repeat 74.726% 16.691%;
}

.img1 {
  background: url('./iconspirites.png') no-repeat 49.95% 0.145%;
}

.img2{
  background: url('./iconspirites.png') no-repeat 25.025% 66.715%;

}



.img3 {
  background: url('./iconspirites.png') no-repeat 100% 16.606%;
}

.img4 {
  background: url('./iconspirites.png') no-repeat 99.899% 0.289%;

}

.img5 {

  background: url('./iconspirites.png') no-repeat 74.924% 100%;
}


.mt20{
  margin-top: 20%;
}


</style>
